<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>备件管理系统 - 库存报表</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3.2.36/dist/vue.global.prod.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <script src="https://unpkg.com/@element-plus/icons-vue/dist/index.iife.min.js"></script>
    <style>
        /* 表格表头底色改为灰色 */
        .el-table__header th {
            background-color: #e1dddd !important; /* 强制覆盖默认样式 */
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 页面标题插槽 -->
    <h2 style="display: none;"><slot name="pageTitle">库存报表</slot></h2>

    <!-- 页面头部插槽 -->
    <header class="header">
        <h2 style="margin: 0;">库存报表</h2>

    </header>

    <!-- 主体内容插槽 -->
    <main>
        <div class="table-container">
            <div style="margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;">
                <el-button type="primary" size="medium" @click="openAddDialog">新增库存报表</el-button>
                <div style="display: flex; gap: 10px;">
                    <el-input v-model="searchQuery" placeholder="请输入备件ID" style="width: 200px;"></el-input>
                    <el-button type="info" size="medium" @click="logout">退出</el-button>
                </div>
            </div>
            <el-table :data="filteredInventoryReports" border style="width: 100%">
                <el-table-column prop="reportid" label="ID"></el-table-column>
                <el-table-column prop="sparepartid" label="备件ID"></el-table-column>
                <el-table-column prop="turnoverRate" label="周转率"></el-table-column>
                <el-table-column prop="occupiedFunds" label="占用资金"></el-table-column>
                <el-table-column prop="date" label="生成日期"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="mini" type="primary" icon="EditPen" @click="editInventoryReport(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" icon="Delete" @click="deleteInventoryReport(scope.row.reportid)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 新增库存报表对话框 -->
            <el-dialog v-model="addDialogVisible" :title="isEdit ? '编辑库存报表' : '新增库存报表'" width="40%">
                <el-form :model="newInventoryReport" label-position="left" label-width="100px" style="max-width: 400px;">
                    <el-form-item label="备件ID">
                        <el-input v-model="newInventoryReport.sparepartid"></el-input>
                    </el-form-item>
                    <el-form-item label="周转率">
                        <el-input v-model="newInventoryReport.turnoverRate"></el-input>
                    </el-form-item>
                    <el-form-item label="占用资金">
                        <el-input v-model="newInventoryReport.occupiedFunds"></el-input>
                    </el-form-item>
                    <el-form-item label="生成日期">
                        <el-date-picker v-model="newInventoryReport.date" type="date" placeholder="选择日期"></el-date-picker>
                    </el-form-item>
                    <el-button type="primary" @click="submitInventoryReport" style="width: 100%">{{ isEdit ? '更新' : '添加' }}</el-button>
                </el-form>
            </el-dialog>
        </div>
    </main>

    <!-- 底部固定 -->
    <footer class="footer">
        &copy; 2025 备件管理系统 - 版权所有
    </footer>
</div>

<!-- 引入 Vue + Axios + Element Plus -->
<script src="https://unpkg.com/vue@3.2.36/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-plus"></script>
<script src="https://unpkg.com/@element-plus/icons-vue/dist/index.iife.min.js"></script>

<script>
    const { createApp } = Vue;
    const apiClient = axios.create({
        //本机地址
        //baseURL: 'http://localhost:8086',
        //服务器 地址
        baseURL: 'http://8.137.85.243:8086',
        timeout: 5000
    });

    const app = createApp({
        data() {
            return {
                inventoryReports: [],
                newInventoryReport: { sparepartid: null, turnoverRate: null, occupiedFunds: null, date: '' },
                searchQuery: '',
                addDialogVisible: false,
                isEdit: false,  // 是否为编辑状态
                currentEditId: null  // 当前编辑的ID
            };
        },
        mounted() {
            this.loadInventoryReports();
        },
        computed: {
            filteredInventoryReports() {
                return this.inventoryReports.filter(report => {
                    return (
                        report.sparepartid.toString().includes(this.searchQuery) ||
                        report.reportid.toString().includes(this.searchQuery)
                    );
                });
            }
        },
        methods: {
            async loadInventoryReports() {
                const res = await apiClient.get('/api/inventoryreports/listall');
                this.inventoryReports = res.data;
            },
            async addInventoryReport() {
                if (!this.newInventoryReport.sparepartid || !this.newInventoryReport.turnoverRate || !this.newInventoryReport.occupiedFunds || !this.newInventoryReport.date) {
                    alert('请填写完整信息');
                    return;
                }

                // 添加数据格式处理
                const payload = {
                    ...this.newInventoryReport,
                    sparepartid: Number(this.newInventoryReport.sparepartid),
                    turnoverRate: Number(this.newInventoryReport.turnoverRate),
                    occupiedFunds: Number(this.newInventoryReport.occupiedFunds),
                    date: this.formatDate(this.newInventoryReport.date)
                };

                try {
                    await apiClient.post('/api/inventoryreports/insert', payload);
                    this.$message.success('添加成功');
                    this.newInventoryReport = { sparepartid: null, turnoverRate: null, occupiedFunds: null, date: '' };
                    this.loadInventoryReports();
                } catch (error) {
                    this.$message.error('添加失败: ' + (error.response?.data?.message || error.message));
                }
            },
            // 提交新增或更新
            async submitInventoryReport() {
                if (!this.newInventoryReport.sparepartid || !this.newInventoryReport.turnoverRate || !this.newInventoryReport.occupiedFunds || !this.newInventoryReport.date) {
                    alert('请填写完整信息');
                    return;
                }

                const payload = {
                    ...this.newInventoryReport,
                    sparepartid: Number(this.newInventoryReport.sparepartid),
                    turnoverRate: Number(this.newInventoryReport.turnoverRate),
                    occupiedFunds: Number(this.newInventoryReport.occupiedFunds),
                    date: this.formatDate(this.newInventoryReport.date)
                };

                try {
                    if (this.isEdit) {
                        // 更新操作
                        await apiClient.put(`/api/inventoryreports/update/${this.currentEditId}`, payload);
                        this.$message.success('更新成功');
                    } else {
                        // 新增操作
                        await apiClient.post('/api/inventoryreports/insert', payload);
                        this.$message.success('添加成功');
                    }
                    this.newInventoryReport = { sparepartid: null, turnoverRate: null, occupiedFunds: null, date: '' };
                    this.isEdit = false;
                    this.currentEditId = null;
                    this.loadInventoryReports();
                } catch (error) {
                    this.$message.error((this.isEdit ? '更新' : '添加') + '失败: ' + (error.response?.data?.message || error.message));
                }
            },
            // 新增日期格式化方法
            formatDate(date) {
                if (!date) return '';
                const d = new Date(date);
                return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
            },
            // 编辑方法
            editInventoryReport(report) {
                this.newInventoryReport = {
                    sparepartid: report.sparepartid,
                    turnoverRate: report.turnoverRate,
                    occupiedFunds: report.occupiedFunds,
                    date: report.date
                };
                this.currentEditId = report.reportid;
                this.isEdit = true;
                this.addDialogVisible = true;
            },
            async deleteInventoryReport(id) {
                if (!confirm('确定删除？')) return;
                await apiClient.delete(`/api/inventoryreports/delete/${id}`);
                this.loadInventoryReports();
            },
            logout() {
                window.location.href = '/dashboard.html';
            },
            openAddDialog() {
                this.addDialogVisible = true;
            }
        }
    });

    app.use(ElementPlus);
    const { EditPen, Delete } = ElementPlusIconsVue;
    app.component('EditPen', EditPen);
    app.component('Delete', Delete);
    app.mount('#app');
</script>
</body>
</html>